<template>
<div class="">
  <input id="toggle-heart" type="checkbox" v-model="check"/>
  <label for="toggle-heart" aria-label="like">❤</label>
</div>
</template>

<script>
export default {
  name: "name",
  title: "title",
  data() {
    return {
      check: false
    }
  }
}
</script>

<style lang="scss">
$bubble-d: 4.5rem; // bubble diameter
$bubble-r: 0.5*$bubble-d; // bubble-radius
$sparkle-d: 0.375rem;
$sparkle-r: 0.5*$sparkle-d;

@mixin sparkles($k) {
    $shadow-list: ();
    $n-groups: 7;
    $group-base-angle: 360deg/$n-groups;
    $group-distr-r: (1 + $k*0.25)*$bubble-r;
    $n-sparkles: 2;
    $sparkle-base-angle: 360deg/$n-sparkles;
    $sparkle-off-angle: 60deg; // offset angle from radius
    $spread-r: -$k*$sparkle-r;

    @for $i from 0 to $n-groups {
        $group-curr-angle: $i*$group-base-angle - 90deg;
        $xg: $group-distr-r*cos($group-curr-angle);
        $yg: $group-distr-r*sin($group-curr-angle);

        @for $j from 0 to $n-sparkles {
            $sparkle-curr-angle: $group-curr-angle + $sparkle-off-angle + $j*$sparkle-base-angle;
            $xs: $xg + $sparkle-d*cos($sparkle-curr-angle);
            $ys: $yg + $sparkle-d*sin($sparkle-curr-angle);

            $shadow-list: $shadow-list, $xs $ys 0 $spread-r hsl(($i + $j)*$group-base-angle, 100%, 75%);
        }
    }

    box-shadow: $shadow-list;
}

@mixin bubble($ext) {
    transform: scale(1);
    border-color: #cc8ef5;
    border-width: $ext;
}

body {
    display: flex;
    justify-content: center;
    margin: 0;
    height: 100vh;
    background: linear-gradient(135deg, #121721, #000);
    font: 1em verdana, sans-serif;
}

[id="toggle-heart"] {
    position: absolute;
    left: -100vw;

    &:checked+label {
        color: #e2264d;
        filter: none;
        will-change: font-size;
        animation: heart 1s cubic-bezier(0.17, 0.89, 0.32, 1.49);

        &:after,
        &:before {
            animation: inherit;
            animation-timing-function: ease-out;
        }

        &:before {
            will-change: transform, border-width, border-color;
            animation-name: bubble;
        }

        &:after {
            will-change: opacity, box-shadow;
            animation-name: sparkles;
        }
    }

    &:focus+label {
        text-shadow: 0 0 3px white, 0 1px 1px white, 0 -1px 1px white, 1px 0 1px white, -1px 0 1px white;
    }
}

[for="toggle-heart"] {
    align-self: center;
    position: relative;
    color: #888;
    font-size: 2em;
    filter: grayscale(1);
    user-select: none;
    cursor: pointer;

    &:after,
    &:before {
        position: absolute;
        z-index: -1;
        top: 50%;
        left: 50%;
        border-radius: 50%;
        content: "";
    }

    &:before {
        box-sizing: border-box;
        margin: -$bubble-r;
        border: solid $bubble-r #e2264d;
        width: $bubble-d;
        height: $bubble-d;
        transform: scale(0);
    }

    &:after {
        margin: -$sparkle-r;
        width: $sparkle-d;
        height: $sparkle-d;
        @include sparkles(1);
    }
}

@keyframes heart {
    0%,
    17.5% {
        font-size: 0;
    }
}

@keyframes bubble {
    15% {
        @include bubble($bubble-r);
    }
    100%,
    30% {
        @include bubble(0);
    }
}

@keyframes sparkles {
    0%,
    20% {
        opacity: 0;
    }
    25% {
        opacity: 1;
        @include sparkles(0);
    }
}
</style>
